<template>
    <div class="safety">
        <assets-head :backFunc="() => $router.push('/userCenter')" />
        <div class="content">
            <div class="title textColor">{{ $t('安全') }}</div>
            <div class="tit1 textColor">{{ $t('双重身份认证') }}</div>
            <div class="tit2">{{ $t('为了保护您的财产，建议至少开启一个双重身份验证（2FA）。') }}</div>
        </div>
        <van-grid :column-num="2" :gutter="12" class="verify">
            <van-grid-item v-for="(item,index) in verifyList" :key="index"
                @click="gotoVerify(item.url, item.isVerify,item.type)">
                <div class="verifyBox">
                    <div class="left">
                        <div class="imgBox">
                            <img v-if="item.isVerify" :src="item.icon.verify" alt="">
                            <img v-else :src="item.icon.verifyno" alt="">
                        </div>
                    </div>
                    <div class="right icon">
                        <img src="@/assets/image/userCenter/more.png" alt="">
                    </div>
                </div>
                <div class="name textColor">{{ item.title}}</div>
            </van-grid-item>
        </van-grid>
        <div class="content">
            <div v-for="(obj,index) in list" :key="index" @click="$router.push(obj.url)"
                class="flex justify-between items-center h-102 text-black ">
                <div class="textColor">{{obj.name}}</div>
                <div class="icon"><img src="@/assets/image/userCenter/more.png" alt=""></div>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { Grid, GridItem } from 'vant'
import Axios from "@/API/userCenter.js";
    export default {
        props: {

        },
        components: {
            assetsHead,
            [Grid.name]: Grid,
            [GridItem.name]: GridItem
        },
        data(){
            return {
                goHome:true,
                verifyList:[
                    {
                        title: this.$t('谷歌验证器'),
                        name:"google",
                        icon: {
                            verifyno: require('@/assets/image/userCenter/gooleVerifyno.png'),
                            verify: require('@/assets/image/userCenter/gooleVerify.png')
                        },
                        isVerify: false,
                        url:'/bindVerify?type=3',
                        type:3
                    },
                    // {
                    //     title: this.$t('手机验证') ,
                    //     name: "phone",
                    //     icon: {
                    //         verifyno: require('@/assets/image/userCenter/phoneVerifyno.png'),
                    //         verify: require('@/assets/image/userCenter/phoneVerify.png')
                    //     },
                    //     isVerify: false,
                    //     url: '/bindVerify?type=1',
                    //     type: 1
                    // },
                    {
                        title: this.$t('邮箱验证') ,
                        name: "email",
                        icon: {
                            verifyno: require('@/assets/image/userCenter/emialVerifyno.png'),
                            verify: require('@/assets/image/userCenter/emialVerify.png')
                        },
                        isVerify: false,
                        url: '/bindVerify?type=2',
                        type: 2
                    }
                ],
                list:[
                    {
                        name: this.$t('修改登录密码'),
                        url:"/changePassword"
                    },
                    {
                        name: this.$t('修改资金密码'),
                        url: "/changeFundsPassword"
                    },
                    {
                        name: this.$t('人工重置') ,
                        url: "/resetVerify?type=0"
                    }
                ],
            }
        },
        mounted(){
            this.getVerifTarget()
        },
        methods: {
            getVerifTarget() {
                Axios.getVerifTarget({
                }).then((res) => {
                    this.dataRest(res.data)
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}           
                });
            },
            dataRest(data){
                this.verifyList.forEach(item=>{
                    if (item.name =='google'){
                        item.isVerify = data.google_auth_bind;
                    } else if (item.name == 'phone'){
                        item.isVerify = data.phone_authority;
                    } else if (item.name == 'email') {
                        item.isVerify = data.email_authority;
                    }
                })
            },
            gotoVerify(url,isVerify,type){
                if (isVerify){
                    this.$router.push(`/changeVerify?type=${type}`);
                }else{
                    this.$router.push(url)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.safety{
    width: 100%;
    box-sizing: border-box;
    ::v-deep .van-grid-item__content {
            background: $cont_background;
        }
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 24px;
    margin-bottom: 24px;
}
.content{
    padding: 0 32px;
}
.tit1{
    font-size: 30px;
    font-weight: 400;
}
.tit2{
    color: #868D9A;
    font-size: 24px;
    margin-top: 9px;
}
.verify{
    font-size: 24px;
    color: #222832;
    margin-top: 42px;
    font-weight: 700;
    .verifyBox{
        display: flex;
        justify-content: space-between;
        padding-left: 28px;
        padding-right: 54px;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        .left{
            .imgBox {
                width: 90px;
                height: 68px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .name{
        width: 100%;
        padding-left: 28px;
        margin-top: 20px;
    }
}
.icon {
    width: 26px;
    height: 26px;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
